<template>
  <div>

    <template v-if="uploadType === 'image'">
      <el-upload class="b_b b_t b_l b_r  relative" :class="uploadCalss" style="background-color: #EEF1FF;"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <div v-if="tip" class="absolute top-[-27px] left-[100px] text-[10px] whitespace-nowrap text-red-600">{{ tip }}
        </div>
        <img v-if="modelValue" :src="modelValue" :class="uploadCalss" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
    </template>

    <template v-else-if="uploadType === 'video'">
      <el-upload :disabled="!!videoUrl" class="w-[120px] h-[40px] relative" style="background-color: #EEF1FF;"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <div v-if="tip" class="absolute top-[-27px] left-[100px] text-[10px] whitespace-nowrap text-red-600">{{ tip }}
        </div>
        <!-- <video class="w-[120px] h-[40px]" :src="videoUrl"></video> -->
        <xiguavideo class="rounded-[4px]" :poster='videoUrl + "?x-oss-process=video/snapshot,t_10,m_fast,w_300,f_png"'
          :autoplay="false" v-if="videoUrl" :id="videoId" :url="videoUrl" :height="40" :width="120"></xiguavideo>
        <el-button type="primary" class="w-[120px] h-[40px] " v-else>
          <span class="text-white">
            {{ btnName }}
          </span>
        </el-button>
      </el-upload>
    </template>

    <template v-else-if="uploadType === 'file'">
      <el-upload ref="upload" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :limit="1" :on-exceed="handleExceed" :auto-upload="false">
        <template #trigger>
          <el-button type="primary">
            <span class="text-white"> {{ btnName }}</span>
          </el-button>
        </template>
        <!-- <el-button class="ml-3" type="success" @click="submitUpload">
        upload to server
      </el-button> -->
        <!-- <template #tip>
        <div class="el-upload__tip text-red">
          limit 1 file, new file will cover the old file
        </div>
      </template> -->
      </el-upload>
    </template>
  </div>
</template>
<script setup lang="ts">
import { ElMessage, genFileId } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
// import type { Props, ispic, IuploadType, value } from "./type";
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'



interface ispic {
  ispic: string
}

interface value {
  url: string,
  name: string
}

type IuploadType = "image" | "image-list" | "file" | "video";


interface Props {
  uploadType: IuploadType
  data?: ispic
  limit?: number
  tip?: string

  uploadCalss?: string

  modelValue?: string
  videoUrl?: string
  videoId?: string
  btnName?: string
}

const props = withDefaults(defineProps<Props>(), {
  uploadType: 'image',
  limit: 1,
  data: () => ({ ispic: '0' }),
  modelValue: '',
  tip: '',
  videoUrl: '',
  videoId: 'videoID',
  uploadCalss: '',
  btnName: '上传文件'
})
console.log(props.videoId)

const emits = defineEmits(["update:modelValue", "update:videoUrl"])

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  if (props.uploadType === 'image') {
    emits('update:modelValue', URL.createObjectURL(uploadFile.raw!)) // 根据实际返回结果再调试
  }
  if (props.uploadType === 'video') {
    emits('update:videoUrl', URL.createObjectURL(uploadFile.raw!)) // 根据实际返回结果再调试
  }
}

// 上传前
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}






const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}



</script>
<style scoped>
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 216px;
  height: 140px;
  text-align: center;
  border-radius: 4px;
}
</style>